<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="api管理">
        <template slot="btn">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd()" v-hasPermi="{v:['sys:api:add']}">增加分组</el-button>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px">
        <el-table
        border
        :data="apiList"
        size="medium"
      > 
      <el-table-column type="expand">
          <template slot-scope="scope">
              <el-table :data="scope.row.children" border size="medium">
                <el-table-column prop="api_name" label="api名称" align="center" :show-overflow-tooltip="true" width="160"></el-table-column>
                <el-table-column prop="api_method" label="请求方式" align="center" width="100"></el-table-column>
                <el-table-column prop="api_url" label="请求路径" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="medium"
                            type="text"
                            icon="el-icon-edit"
                            v-hasPermi="['sys:api:edit']"
                            @click="handleUpdate2(scope.row)"
                    >修改</el-button>

                    <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-plus"
                    v-hasPermi="{v:['sys:api:add']}"
                    @click="handleAdd2(scope.row)"
                    >新增</el-button>
                    <el-button
                    class="text-btn-red"
                    size="medium"
                    type="text"
                    icon="el-icon-delete"
                    v-hasPermi="{v:['sys:api:delete']}"
                    @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
                </el-table-column>
              </el-table>
          </template>
      </el-table-column>
        <el-table-column prop="api_name" label="分组名称" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
        <el-table-column prop="api_name" label="分组类型" align="center" :show-overflow-tooltip="true" width="200">
          <template slot-scope="scope">
             <span v-if="scope.row.api_interface_type==1">必开分组</span>
             <span v-if="scope.row.api_interface_type==2">权限验证分组</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="medium"
                       type="text"
                       icon="el-icon-edit"
                       v-hasPermi="{v:['sys:api:edit']}"
                       @click="handleUpdate1(scope.row)"
            >修改</el-button>

            <el-button
              size="medium"
              type="text"
              icon="el-icon-plus"
              v-hasPermi="{v:['sys:api:add']}"
              @click="handleAdd3(scope.row)"
            >新增</el-button>
            <el-button
              class="text-btn-red"
              size="medium"
              type="text"
              icon="el-icon-delete"
              v-hasPermi="{v:['sys:api:delete']}"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-table
        border
        :data="apiList"
        row-key="_id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      > 
        <el-table-column prop="api_name" label="分组名称" align="center" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="api_method" label="请求方式" align="center" width="100"></el-table-column>
        <el-table-column prop="api_url" label="请求路径" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="medium"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
            >修改</el-button>

            <el-button
              size="medium"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
            >新增</el-button>
            <el-button
              class="text-btn-red"
              size="medium"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <el-dialog :title="title1" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分组名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="分组类型" prop="type">
               <el-select
                  :disabled ="disable"
                  style="width:100%"
                  v-model="form.type"
                  placeholder="分组类型"
                  clearable
                  size="small"
                >
                  <el-option
                    v-for="(item, index) in types"
                    :key="index"
                    :label="item.label"
                    :value="item.index"
                  />
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title2" :visible.sync="openApi" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
            <el-col :span="24">
            <el-form-item label="api名称" prop="api_name">
              <el-input v-model="form.api_name" placeholder="请输入api名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求路径" prop="url">
              <el-input v-model="form.url" placeholder="请输入请求路径" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求方式" prop="methods">
               <el-select v-model="form.methods" placeholder="请求方式" clearable size="small" style="width:100%">
                    <el-option
                    v-for="(item,index) in values"
                    :key="index"
                    :label="item.label"
                    :value="item.label"
                    />
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="cancelApi">取 消</el-button>
        <el-button type="primary" @click="submitFormApi">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createApi,apiList,deleteApi,updateApi} from '@/api/authorization' 
export default {
  data() {
    return {
     disable:false,
     title1:'',
     title2:'',
     id:'',
     open:false,
     openApi:false,
     apiList:[],
     form:{
         parent_id:'',
         api_name:'',
         type:null,
         name:'',
         url:'',
         methods:''
     },
     types:[
        {
           index:1,
           label:'必开分组'
         },
         {
           index:2,
           label:'权限验证分组'
         },
     ],
     values:[
         {
           index:0,
           label:'GET'
         },
         {
           index:1,
           label:'POST'
         },
         {
           index:2,
           label:'PUT'
         },
         {
           index:3,
           label:'DELETE'
         }
     ],
     rules:{
       name: [
          { required: true, message: "分组名称不能为空", trigger: "blur" }
        ],
        api_name: [
          { required: true, message: "api名称不能为空", trigger: "blur" }
        ],
        url: [
          { required: true, message: "请求路径不能为空", trigger: "blur" }
        ],
        methods: [
          { required: true, message: "请选择请求方式", trigger: "change" }
        ],
        type:[
          { required: true, message: "请选择分组类型", trigger: "change" }
        ]
     }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getApiList()
  },
  mounted() {},
  methods: {
   getApiList(){
     apiList().then(res=>{
        if(res.code==200){
            this.apiList = res.data
        }
     })
   },
   handleAdd(){
    this.open = true
    this.title1 = '添加分组'
    this.disable = false
   },
   handleAdd1(){
    this.reset()
    this.open = true
    this.title1 = '添加分组'
   },
   handleAdd2(row){
    this.reset()
    this.openApi = true
    this.title2 = '添加API'
    this.form.parent_id = row.parent_id
    this.form.type = row.api_interface_type
   },
   handleAdd3(row){
    this.reset()
    this.openApi = true
    this.title2 = '添加API'
    this.form.parent_id = row._id
    this.form.type = row.api_interface_type
   },
   handleUpdate1(row){
    this.disable = true
    this.open = true
    this.title1 = '编辑分组'
    this.id = row._id
    this.form.name = row.api_name
    this.form.type = row.api_interface_type
   },
   handleUpdate2(row){
    this.openApi = true
    this.title2 = '编辑API'
    this.id = row._id
    this.form.parent_id = row.parent_id
    this.form.methods = row.api_method
    this.form.api_name = row.api_name
    this.form.url = row.api_url
    this.form.type = row.api_interface_type
   },
   handleDelete(row){
     let that = this
     that.$confirm('是否确认删除名称为"' + row.api_name + '"的api?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
      }).then(() => {
          deleteApi(row._id).then(res=>{
          if(res.code==200){
            that.$message.success('删除成功')
            this.getApiList()
          }else{
           this.$message.error(res.msg)
         }
        })
      }).catch(function() {});
   },
   cancel(){
     this.open = false
     this.reset()
   },
    //重置表单
    reset() {
      this.form = {
        parent_id:'',
         api_name:'',
         type:'',
         name:'',
         url:'',
         methods:''
      };
    this.resetForm("form");
    },
   submitForm(){
     this.$refs.form.validate((valid) => {
       if (valid) {
         let data = {
        "api_name":this.form.name,
        "parent_id":"0",
        "api_type":1,
        "api_url":"*",
        "api_method":"*",
        "api_interface_type":this.form.type
     }
     if(this.title1=='添加分组'){
        createApi(data).then(res=>{
         if(res.code==200){
           this.$message.success('添加成功')
           this.open = false
           this.getApiList()
           this.reset()
         }else{
           this.$message.error(res.msg)
         }
     })    
    }else{
      updateApi(this.id,data).then(res=>{
         if(res.code==200){
           this.$message.success('修改成功')
           this.open = false
           this.getApiList()
           this.reset()
         }else{
           this.$message.error(res.msg)
         }
     })   
    }
       }
     })
   },
   cancelApi(){
     this.openApi = false 
   },
   submitFormApi(){
     this.$refs.form.validate((valid) => {
       if (valid) {
         let data = {
        "api_interface_type":Number(this.form.type),
        "api_name":this.form.api_name,
        "parent_id":this.form.parent_id,
        "api_type":2,
        "api_url":this.form.url,
        "api_method":this.form.methods
     }
     if(this.title2=='添加API'){
       createApi(data).then(res=>{
         if(res.code==200){
           this.$message.success('添加成功')
           this.openApi = false
           this.getApiList()
           this.reset()
         }else{
           this.$message.error(res.msg)
         }
       })    
     }else{
      updateApi(this.id,data).then(res=>{
         if(res.code==200){
           this.$message.success('修改成功')
           this.openApi = false
           this.getApiList()
           this.reset()
         }else{
           this.$message.error(res.msg)
         }
     })   
     }
       }
     })
   }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
